<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<!-- 样式设置 -->
		<!-- <link rel="stylesheet" href="外部样式的地址"> -->
		<title>此处添加标题</title>
	</head>
	<body>
		
		<form action="" method="post">
			<div>
				<label>账号：</label>
				<!-- <input name="account" onblur="validAccount(this)"> -->
				<input id="account" name="account">
			</div>
			<div>
				<label>密码：</label>
				<input name="password" type="password">
			</div>
			<div>
				<label>确认密码：</label>
				<input name="repassword" type="password">
			</div>
			<div>
				<label>账号：</label>
				<input name="account">
			</div>
			<div>
				<input type="submit" value="注册">
			</div>
		</form>
		
		<!-- <script src="外部脚本的地址"></script> -->
		<!-- 此处添加JS文件-->
		<script src="${pageContext.request.contextPath }/static/plugins/jquery-1.11.3.min.js"></script>
		<script type="text/javascript">
		
			$(function(){
				//绑定事件
				$("#account").on('blur',function(){
					var value = $(this).val();
					//处理ajax请求
					$.ajax({
						
						url:'/ajax/validaccount',
						type:'post',
						data:{
							account:value
						},
						dataType:'json',
						//发送请求之前
						beforeSend:function(){
							return value != "";
						},
						//响应成功
						success:function(result){
							/* if(result == "false"){
								alert("账号已存在");
							} */
							/* var json = eval("(" +result +")");
							if(!json.success){
								alert("账号已存在");
							} */
							console.log(result);
						},
						//相应失败
						error:function(){
							alert("服务器错误！请联系管理员")
						}
						
					});
				});
			});
		
		
			function validAccount(element){
				var account = element.value;
				if(account == ""){
					alert("账号不能为空");
					return;
				}
				doAjax(account);
			}
			
			function doAjax(value){
				// 1. 创建XMLHTTPRequest
				//考虑浏览器兼容性
				var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); 
				//var xhr = new XMLHttpRequest();
				// 2. 设置打开的地址和方式
				xhr.open("get","/ajax/validaccount?account="+value,true);
				// 3. 设置回调函数
				xhr.onreadystatechange = function(){
					if(xhr.readyState == 4){
						// 如果是正确的
						if(xhr.status == 200){
							//处理服务器的响应内容
							//alert(xhr.responseText);
							if(xhr.responseText == "false"){
								alert("账号已存在");
							}
						}else{
							alert("服务器错误");
						}
					}
				};
				// 4. 发送请求
				xhr.send(null);
			}
			
		</script>
	</body>
</html>
